<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的小餐桌 - 饮食计划</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/lucide-static@latest/font/lucide.min.css" rel="stylesheet">
</head>
<body>
    <div class="device-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">9:41</div>
            <div class="status-bar-right">
                <span class="lucide-wifi"></span>
                <span class="lucide-battery"></span>
            </div>
        </div>
        
        <!-- 应用内容 -->
        <div class="app-container">
            <!-- 标题 -->
            <div class="header">
                <div class="title">饮食计划</div>
                <button class="button" style="padding: 8px 12px; font-size: 14px;" onclick="alert('创建新计划功能开发中...')">
                    <span class="lucide-plus" style="margin-right: 5px;"></span>新计划
                </button>
            </div>
            
            <!-- 时间周期选择 -->
            <div class="tab-bar">
                <div class="tab active" onclick="switchTab(this, 'daily')">日计划</div>
                <div class="tab" onclick="switchTab(this, 'weekly')">周计划</div>
                <div class="tab" onclick="switchTab(this, 'monthly')">月计划</div>
            </div>
            
            <!-- 日计划内容 -->
            <div id="daily" class="tab-content">
                <div class="meal-plan-day">
                    <div class="meal-plan-date">今天 · 2023年12月15日</div>
                    
                    <!-- 早餐 -->
                    <div class="meal-card">
                        <div class="meal-time">
                            <span class="lucide-sunrise"></span>
                            <span>早餐</span>
                        </div>
                        <div class="meal-content">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                                <span style="font-weight: 600;">清爽早餐</span>
                                <span style="color: #777;">7:30</span>
                            </div>
                            <div style="display: flex; gap: 10px;">
                                <div style="background-color: #f5f5f5; padding: 5px 10px; border-radius: 5px; font-size: 14px;">全麦面包</div>
                                <div style="background-color: #f5f5f5; padding: 5px 10px; border-radius: 5px; font-size: 14px;">牛奶</div>
                                <div style="background-color: #f5f5f5; padding: 5px 10px; border-radius: 5px; font-size: 14px;">煮蛋</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 午餐 -->
                    <div class="meal-card">
                        <div class="meal-time">
                            <span class="lucide-sun"></span>
                            <span>午餐</span>
                        </div>
                        <div class="meal-content">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                                <span style="font-weight: 600;">营养午餐</span>
                                <span style="color: #777;">12:00</span>
                            </div>
                            <div style="display: flex; gap: 10px;">
                                <div style="background-color: #f5f5f5; padding: 5px 10px; border-radius: 5px; font-size: 14px;">米饭</div>
                                <div style="background-color: #f5f5f5; padding: 5px 10px; border-radius: 5px; font-size: 14px;">红烧肉</div>
                                <div style="background-color: #f5f5f5; padding: 5px 10px; border-radius: 5px; font-size: 14px;">清炒菜心</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 晚餐 -->
                    <div class="meal-card">
                        <div class="meal-time">
                            <span class="lucide-moon"></span>
                            <span>晚餐</span>
                        </div>
                        <div class="meal-content">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                                <span style="font-weight: 600;">轻食晚餐</span>
                                <span style="color: #777;">18:30</span>
                            </div>
                            <div style="display: flex; gap: 10px;">
                                <div style="background-color: #f5f5f5; padding: 5px 10px; border-radius: 5px; font-size: 14px;">蔬菜沙拉</div>
                                <div style="background-color: #f5f5f5; padding: 5px 10px; border-radius: 5px; font-size: 14px;">鲑鱼</div>
                                <div style="background-color: #f5f5f5; padding: 5px 10px; border-radius: 5px; font-size: 14px;">南瓜汤</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 营养分析 -->
                <div class="section-title">今日营养分析</div>
                
                <!-- 营养图表 -->
                <div class="nutrition-chart">
                    <img src="https://quickchart.io/chart?c={type:'doughnut',data:{labels:['蛋白质','脂肪','碳水化合物'],datasets:[{data:[25,30,45],backgroundColor:['%234CAF50','%23FF9800','%232196F3']}]},options:{plugins:{doughnutlabel:{labels:[{text:'2100',font:{size:20}},{text:'卡路里'}]}}}}" alt="营养分析图表">
                </div>
                
                <!-- 营养数据 -->
                <div class="nutrition-data">
                    <div class="nutrition-item">
                        <div class="nutrition-label">蛋白质</div>
                        <div class="nutrition-value">105g</div>
                    </div>
                    <div class="nutrition-item">
                        <div class="nutrition-label">脂肪</div>
                        <div class="nutrition-value">70g</div>
                    </div>
                    <div class="nutrition-item">
                        <div class="nutrition-label">碳水化合物</div>
                        <div class="nutrition-value">240g</div>
                    </div>
                    <div class="nutrition-item">
                        <div class="nutrition-label">膳食纤维</div>
                        <div class="nutrition-value">28g</div>
                    </div>
                </div>
                
                <!-- 健康建议 -->
                <div class="card" style="margin-top: 20px;">
                    <div style="font-weight: 600; margin-bottom: 10px;">健康建议</div>
                    <div style="color: #777; font-size: 14px;">
                        <div style="display: flex; align-items: center; margin-bottom: 5px;">
                            <span class="lucide-alert-circle" style="color: #FFC107; margin-right: 5px;"></span>
                            需要增加膳食纤维的摄入，建议多吃蔬菜水果
                        </div>
                        <div style="display: flex; align-items: center; margin-bottom: 5px;">
                            <span class="lucide-check-circle" style="color: #4CAF50; margin-right: 5px;"></span>
                            蛋白质摄入达标，有助于肌肉修复
                        </div>
                        <div style="display: flex; align-items: center;">
                            <span class="lucide-info" style="color: #2196F3; margin-right: 5px;"></span>
                            碳水摄入适中，能量充足
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 周计划内容 -->
            <div id="weekly" class="tab-content hidden">
                <div class="card">
                    <div style="text-align: center; padding: 20px;">
                        <span class="lucide-calendar" style="font-size: 48px; color: #999;"></span>
                        <p style="margin-top: 10px; color: #777;">周计划视图正在开发中...</p>
                    </div>
                </div>
            </div>
            
            <!-- 月计划内容 -->
            <div id="monthly" class="tab-content hidden">
                <div class="card">
                    <div style="text-align: center; padding: 20px;">
                        <span class="lucide-calendar" style="font-size: 48px; color: #999;"></span>
                        <p style="margin-top: 10px; color: #777;">月计划视图正在开发中...</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="navbar">
            <a href="kitchen.html" class="nav-item">
                <span class="lucide-chef-hat nav-icon"></span>
                <span>厨房</span>
            </a>
            <a href="mealplan.html" class="nav-item active">
                <span class="lucide-calendar nav-icon"></span>
                <span>饮食计划</span>
            </a>
            <a href="discover.html" class="nav-item">
                <span class="lucide-compass nav-icon"></span>
                <span>发现</span>
            </a>
            <a href="profile.html" class="nav-item">
                <span class="lucide-user nav-icon"></span>
                <span>我的</span>
            </a>
        </div>
    </div>
    
    <script>
        function switchTab(tab, contentId) {
            // 移除所有标签的active类
            document.querySelectorAll('.tab').forEach(t => {
                t.classList.remove('active');
            });
            
            // 给当前标签添加active类
            tab.classList.add('active');
            
            // 隐藏所有内容
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.add('hidden');
            });
            
            // 显示当前内容
            document.getElementById(contentId).classList.remove('hidden');
        }
    </script>
</body>
</html> 